import { X, FunnelSimple } from "@phosphor-icons/react";
import { TopBarButton } from "@sd/ui";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { useJobManager } from "../hooks/useJobManager";
import { JobRow } from "./JobRow";

export function JobsScreen() {
  const navigate = useNavigate();
  const { jobs, pause, resume } = useJobManager();
  const [showOnlyRunning, setShowOnlyRunning] = useState(false);

  // Filter jobs based on toggle
  const filteredJobs = showOnlyRunning
    ? jobs.filter(job => job.status === "running" || job.status === "paused")
    : jobs;

  // Group jobs by status
  const runningJobs = filteredJobs.filter(j => j.status === "running");
  const pausedJobs = filteredJobs.filter(j => j.status === "paused");
  const queuedJobs = filteredJobs.filter(j => j.status === "queued");
  const completedJobs = filteredJobs.filter(j => j.status === "completed");
  const failedJobs = filteredJobs.filter(j => j.status === "failed");

  return (
    <div className="flex flex-col h-screen bg-app">
      {/* Header */}
      <div className="sticky top-0 z-10 backdrop-blur-xl bg-app/80 border-b border-app-line">
        <div className="flex items-center justify-between px-6 py-4">
          <div className="flex items-center gap-4">
            <h1 className="text-2xl font-bold text-ink">Jobs</h1>
            <div className="flex items-center gap-2 text-sm text-ink-dull">
              <span>{jobs.length} total</span>
              {runningJobs.length > 0 && (
                <>
                  <span>•</span>
                  <span>{runningJobs.length} running</span>
                </>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            {/* Filter toggle */}
            <TopBarButton
              icon={FunnelSimple}
              active={showOnlyRunning}
              onClick={() => setShowOnlyRunning(!showOnlyRunning)}
              title={showOnlyRunning ? "Show all jobs" : "Show only active jobs"}
            />

            {/* Back button */}
            <TopBarButton
              icon={X}
              onClick={() => navigate(-1)}
              title="Go back"
            />
          </div>
        </div>

        {/* Column headers */}
        <div className="flex items-center gap-4 px-4 py-2 text-xs font-medium text-ink-dull uppercase tracking-wide bg-app-box/30 border-t border-app-line/30">
          <div className="flex-shrink-0 w-10" /> {/* Icon spacer */}
          <div className="flex-1 min-w-0 flex items-center gap-6">
            <div className="flex-1">Name</div>
            <div className="flex-shrink-0 w-32">Progress</div>
            <div className="flex-shrink-0 w-20 text-right">Duration</div>
            <div className="flex-shrink-0 w-24 text-right">Created</div>
            <div className="flex-shrink-0 w-20 text-right">Status</div>
          </div>
          <div className="flex-shrink-0 w-6" /> {/* Action button spacer */}
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto">
        {filteredJobs.length === 0 ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <p className="text-sm text-ink-dull">No jobs found</p>
            </div>
          </div>
        ) : (
          <div>
            {/* Running Jobs */}
            {runningJobs.length > 0 && (
              <JobSection title="Running" count={runningJobs.length}>
                {runningJobs.map(job => (
                  <JobRow key={job.id} job={job} onPause={pause} onResume={resume} />
                ))}
              </JobSection>
            )}

            {/* Paused Jobs */}
            {pausedJobs.length > 0 && (
              <JobSection title="Paused" count={pausedJobs.length}>
                {pausedJobs.map(job => (
                  <JobRow key={job.id} job={job} onPause={pause} onResume={resume} />
                ))}
              </JobSection>
            )}

            {/* Queued Jobs */}
            {queuedJobs.length > 0 && (
              <JobSection title="Queued" count={queuedJobs.length}>
                {queuedJobs.map(job => (
                  <JobRow key={job.id} job={job} onPause={pause} onResume={resume} />
                ))}
              </JobSection>
            )}

            {/* Completed Jobs */}
            {completedJobs.length > 0 && (
              <JobSection title="Completed" count={completedJobs.length}>
                {completedJobs.map(job => (
                  <JobRow key={job.id} job={job} onPause={pause} onResume={resume} />
                ))}
              </JobSection>
            )}

            {/* Failed Jobs */}
            {failedJobs.length > 0 && (
              <JobSection title="Failed" count={failedJobs.length}>
                {failedJobs.map(job => (
                  <JobRow key={job.id} job={job} onPause={pause} onResume={resume} />
                ))}
              </JobSection>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

interface JobSectionProps {
  title: string;
  count: number;
  children: React.ReactNode;
}

function JobSection({ title, count, children }: JobSectionProps) {
  return (
    <div>
      <div className="sticky top-[73px] z-10 flex items-center gap-2 px-4 py-2 bg-app-box/50 backdrop-blur-sm border-b border-app-line/50">
        <h2 className="text-xs font-semibold text-ink uppercase tracking-wide">
          {title}
        </h2>
        <span className="text-xs text-ink-dull">({count})</span>
      </div>
      <div>
        {children}
      </div>
    </div>
  );
}
